<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" loading-more-no-more-text="我也是有底线的！" auto-show-back-to-top :fixed="false" height="100%">
    <block v-for="(newsItem, newsIndex) in dataList" :key="newsIndex"><news-card :item="newsItem" :newsId="newsItem.id"></news-card></block>
  </z-paging>
</template>
<script>
import { mapState } from 'vuex';
export default {
  props: {
    cid: {
      type: Number|String
    },
    index: {
      type: Number
    },
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dataList: [],
      isFirst: true
    };
  },
  watch: {
    current: {
      async handler(newVal, oldVal) {
        console.log('current', newVal, oldVal);
        this.$nextTick(() => {
          if (this.index == newVal && this.isFirst) {
            this.isFirst = false;
            this.$refs.paging.reload();
          }
        });
      },
      immediate: true
    }
  },
  methods: {
    async queryList(page_no, page_size) {
      console.log('queryList', page_no, page_size);
      try {
        const { lists } = await uni.$u.api.getArticleList({
          cid: this.cid,
          page_no,
          page_size
        });
        this.$refs.paging.complete(lists);
      } catch (e) {
        console.log('报错=>', e);
        //TODO handle the exception
        this.$refs.paging.complete(false);
      }
    }
  }
};
</script>

<style scoped></style>
